/*
 * @Author: Li Zengkun
 * @Date: 2022-08-11 22:41:14
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-14 10:25:24
 * @Description: 
 */
let oSearchbar = document.querySelector('#searchbar')
let oSearchButton = document.querySelector('#search-button')
let keyword = getUrlParam("keyword")
let oResultsList = document.querySelector('#result-list')
let oNoResult = document.querySelector('#no-result')
let oGoodsContent = document.querySelector('#goods-content')
let goods = []
let pageIndex = 0
let pageSize = 6
let isAdd = false
let isUpdate = true
let sortByPrice = null
init()

oGoodsContent.addEventListener('touchmove', function() {
    if (isUpdate) {

        //scrollTop 是滚动条滚动时，距离顶部的距离
        var scrollTop = oGoodsContent.scrollTop
        var clientHeight = oGoodsContent.clientHeight
        var scrollHeight = oGoodsContent.scrollHeight

        if (scrollTop + 10 > scrollHeight - clientHeight) {
            console.log("触底");
            getGoodsList()
            isUpdate = false
        }
        setTimeout(() => {
            isUpdate = true
        }, 1000)
    }
})

/**
 * @description: 初始化页面
 * @return {*}
 */
async function init() {
    // 设置 searchbar value
    oSearchbar.value = keyword
        // 添加搜索按钮点击事件
    oSearchButton.addEventListener('click', () => {
        keyword = oSearchbar.value.trim()
        isAdd = false
        pageIndex = 0
        getGoodsList()
    })
    if (keyword === '') {
        oResultsList.style.display = 'none'
        oNoResult.style.display = 'block'
        return
    } else {
        getGoodsList()
    }

}

/**
 * @description: 获取 URL 参数
 * @return {*} r[2] 
 * @return {*} null 
 * @param {*} name 需要获取的参数名称
 */
function getUrlParam(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
    let r = decodeURI(window.location.search).substr(1).match(reg)
    if (r != null) {
        return r[2]
    }
    return ''
}


/**
 * @description: axios 获取商品列表
 * @return {*}
 * @param {*} keyword 关键字
 * @param {*} pageSize 一页有多少个商品
 * @param {*} pageIndex 第几页
 */
function getGoodsList() {
    pageIndex++
    console.log(pageIndex);
    axios.get('/goods/list', {
            params: {
                pageSize: pageSize,
                pageIndex: pageIndex,
                cate_id: null,
                cate_level: null,
                keyword: keyword,
                sortByPrice: sortByPrice,
            }
        })
        .then((resp) => {
            goods = resp.data
            console.log("lengrh:" + goods.length);
            initGoods()
        })
}


/**
 * @description: 将查询到的商品插入 result-list 中
 * @return {*}
 */
function initGoods() {
    // 查询有结果
    if (goods.length != 0) {
        oResultsList.style.display = 'block'
        oNoResult.style.display = 'none'
        if (!isAdd) {
            while (oResultsList.hasChildNodes()) {
                oResultsList.removeChild(oResultsList.firstChild)
            }
        }
        for (let item of goods) {
            let itemHTML = `<li class="result-item" data-id="${item.id}">
                                <a href="./product_details.html?id=${item.id}">
                                <img src="${item.img_md}" alt="">
                                <div class="content">
                                    <div class="title">${item.name}</div>
                                    <div class="info">${item.hotPoint}</div>
                                    <div class="price">￥<span id="price">${item.price}</span></div>
                                </div>
                                </a>
                            </li>`
            oResultsList.insertAdjacentHTML('beforeend', itemHTML)
        }
        isAdd = true
    }
    // 查询无结果
    if (goods.length === 0 && pageIndex == 1) {
        console.log("查询无结果");
        oResultsList.style.display = 'none'
        oNoResult.style.display = 'block'
    }
}